<template>
  <div class="bannerbox">
    <ClientOnly>
      <n-carousel show-arrow autoplay :interval="duration"  v-show="bannerList && bannerList.length >0">
        <template v-for="(item) in bannerList" :key="item.cover">
          <nuxt-link :to="item.skipValue" :target="item.openMark" :title="item.skipTitle">
            <img class="carousel-img" :style="{'height':height+'px'}" :src="item.cover"/>
          </nuxt-link>
        </template>
      </n-carousel>
      <template #fallback>
        <div class="flex items-center justify-center align-center">
          <k-loading show></k-loading>
        </div>
      </template>
    </ClientOnly>
  </div>
</template>
<script setup>
var bannerList = ref([])
// 自定义属性
const props = defineProps({
  height: {
    type: Number,
    default: 150
  },
  type: {
    type: Number,
    default: 1
  },
  duration: {
    type: Number,
    default: 5000
  }
})

/**
 * 查询广告接口
 * @returns
 */
const handleLoadBannerData = async () => {
  const resp = await useLoadAdvertList(props.type || 1)
  bannerList.value = resp.data || []
}

onMounted(() => {
  handleLoadBannerData()
})
</script>
<style scoped>
.carousel-img {
  width: 100%;
  object-fit: cover;
}
</style>